<template>
	<div class="juBaoBack" :style="backStyle">
		<div class="juBao" :style="juBaoStyle">
			<h2>举报文章内容</h2>
			<div>
				<ul>
					<li v-for='(value,index) in juBaoContent' :key="index" data-type = "">
						<span>{{value}}</span>
						<i @click="clickSelect(index)" :class="{'changeIcon':iconShow[index]}"></i>
					</li>
				</ul>
			</div>
			<div class="juBao-middle">
				<a href="javascript:;" :class="{'tucao':isTextarea}">其他问题，我要吐槽<i></i></a>
			    <textarea name="" rows="" cols="" v-if="isTextarea" v-model="textContent" @keydown="textNumber" @keyup="textNumber"></textarea>
			    <p>{{limitNum}}/20</p>
			</div>
			<div class="juBao-bottom">
			    <span @click="jubaoCancel">取消</span>
			    <span class="hoverShow" @click="jubaoSure">确认</span>
			</div>
			<div class="jubaoSure" v-if="isNotice === 1">
				<h4>提示</h4>
				<p>是否要提交举报</p>
				<div class='sure-bottom'>
					<span class="isJuBao" @click="yesJuBao">是</span>
					<span @click="noJuBao">否</span>
				</div>
			</div>
			<div class="nojbContent" v-if="isNotice === 2">
				<img src="../../assets/public/right.png" alt="" />
				<p>请选择举报原因</p>
			</div>
		</div>
	</div>
</template>

<script>
  export default {
    data () {
      return {
        backStyle: { // juBao背景颜色的大小
          width: '400px',
          height: '390px'
        },
        juBaoStyle: { // jubao位置
          marginTop: '200px',
          marginLeft: '200px'
        },
        juBaoContent: [ // 举报的内容
          '广告',
          '重复、旧闻',
          '格式问题',
          '低俗',
          '标题夸张',
          '与事实不符',
          '疑似抄袭'
        ],
        iconShow: {}, // 举报内容勾选
        isTextarea: true, // 我要吐槽选框是否显示
        limitNum: 0, // textarea的字数限制
        textContent: '', // textarea的内容
        isNotice: 0 // 举报二次提示框
      }
    },
    mounted () {
      var that = this
      function changeShiTu (shiTu) {
        var stWidth = window.innerWidth
        var stHeight = window.innerHeight
        var marTop = stHeight / 2 - 195
        var marLeft = stWidth / 2 - 200
        shiTu.backStyle.width = stWidth + 'px'
        shiTu.backStyle.height = stHeight + 'px'
        shiTu.juBaoStyle.marginTop = marTop + 'px'
        shiTu.juBaoStyle.marginLeft = marLeft + 'px'
      }
      changeShiTu(that)
      window.onresize = function () {
        changeShiTu(that)
      }
    },
    methods: {
      // 定时器
      setTimer (jbt) {
        setTimeout(function () {
          jbt.isNotice = 0
        }, 3000)
      },
      // 判断右侧选框状态
      clickSelect (index) {
        var that = this
        if (that.iconShow[index] === undefined) {
          that.$set(that.iconShow, index, true)
        } else {
          that.$set(that.iconShow, index, !that.iconShow)
        }
      },
      // 判断我要吐槽输入框字数
      textNumber () {
        var that = this
        if (that.limitNum < 20) {
          that.limitNum = that.textContent.length
        } else {
          that.textContent = that.textContent.substring(0, 20)
          that.limitNum = that.textContent.length
        }
      },
      // 点击取消事件
      jubaoCancel () {
        this.$emit('NoJuBao')
      },
      // 点击确认事件
      jubaoSure () {
        var that = this
        var jbObj = that.iconShow
        var temp = 0
        for (var i in jbObj) {
          if (jbObj[i] !== true) {
            temp = 0
          } else {
            temp = 1
          }
        }
        if (!temp && that.textContent === '') {
          that.isNotice = 2
          that.setTimer(that)
        } else {
          that.isNotice = 1
        }
      },
      // 是否举报 是
      yesJuBao () {
        this.$emit('yesJuBao')
      },
      // 是否举报 否
      noJuBao () {
        this.isNotice = 0
        this.$emit('NoJuBao')
      }
    }
  }
</script>

<style scoped>
	@import '../../../static/components/public/juBao.css'
</style>